<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue.js 组件中的 data 和 methods</title>
        
        <script src="../../../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <my-component></my-component>
        </div>
        
        <script>
            var myComponent = {
                template: '<h1>{{ message }}</h1>',
                data: function() {
                    return {
                        message: 'Hello Vue.js!'
                    }
                },
                methods: {
                    reverseMessage: function() {
                        this.message = this.message.split('').reverse().join('');
                    } // reverseMessage() 方法用于将 message 的内容反转，上面代码没有调用该方法，这里仅展示如何定义方法
                }
            };
            
            var vm = new Vue({
                el: '#app',
				data: {
					fartherMsg: "爸爸的话"
				},
                components: {
                    'my-component': myComponent
                }
            });
        </script>
    </body>
</html>